<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>部门树选择</title>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/css/dept/dept.css}" rel="stylesheet">

    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/bootstrap-treetable/bootstrap-treetable.js}"></script>
    <script th:src="@{/js/layer/layer.min.js}"></script>
    <script th:src="@{/validate/jquery.validate.min.js}"></script>
    <script th:src="@{/validate/messages_zh.min.js}"></script>
    <script th:src="@{/validate/jquery.validate.extend.js}"></script>
    <script th:src="@{/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/system/dept.js}"></script>

</head>
<style>
    body {
        height: auto;
        font-family: "Microsoft YaHei", serif;
    }

    button {
        font-family: "SimSun", "Helvetica Neue", Helvetica, Arial, serif;
    }
</style>
<body class="hold-transition box box-main">
<!--/*@thymesVar id="dept" type="com.lzw.yin.domain.entity.Dept"*/-->
<input id="treeId" name="treeId" type="hidden" th:value="${dept.deptId}"/>
<input id="treeName" name="treeName" type="hidden" th:value="${dept.deptName}"/>
<div class="wrapper">
    <div class="treeShowHideButton" onclick="toggleSearch();">
        <label id="btnShow" title="显示搜索" style="display:none;">︾</label>
        <label id="btnHide" title="隐藏搜索">︽</label>
    </div>
    <div class="treeSearchInput" id="search">
        <label for="keyword">关键字：</label><input type="text" class="empty" id="keyword" maxlength="50">
        <button class="btn" id="btn" onclick="searchNode()"> 搜索</button>
    </div>
    <div class="treeExpandCollapse">
        <a href="#" onclick="expand()">展开</a> /
        <a href="#" onclick="collapse()">折叠</a>
    </div>
    <div id="tree" class="ztree treeselect"></div>
</div>

<script th:inline="javascript">

    let deptId = [[${deptId}]];
    let excludeId = [[${excludeId}]];

    let zTree;


    $(function () {
        let url = isEmpty(excludeId) ? "/dept/treeData" : "/dept/treeData/" + excludeId;

        let options = {
            expandLevel: 2
        };

        // 树结构初始化加载
        let setting = {
            expandAll: true,
            callback: {
                onClick: zOnClick,                      // 用于捕获节点被点击的事件回调函数
                onCheck: options.onCheck,                      // 用于捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数
                onDblClick: options.onDblClick                 // 用于捕获鼠标双击之后的事件回调函数
            },
            check: {
                enable: false,             // 置 zTree 的节点上是否显示 checkbox / radio
                nocheckInherit: true,      // 设置子节点是否自动继承
                chkboxType: {"Y": "ps", "N": "ps"} // 父子节点的关联关系
            },
            view: {
                selectedMulti: false,      // 设置是否允许同时选中多个节点
                nameIsHTML: true           // 设置 name 属性是否支持 HTML 脚本
            },
            data: {
                key: {
                    title: "title"         // 节点数据保存节点提示信息的属性名称
                },
                simpleData: {
                    enable: true           // true / false 分别表示 使用 / 不使用 简单数据模式
                }
            }
        };


        $.get(url, function (data) {
            zTree = $.fn.zTree.init($("#tree"), setting, data);


            //按照等级展开节点
            for (let i = 0; i < options.expandLevel; i++) {
                let nodes = zTree.getNodesByParam("level", i);
                for (let j = 0; j < nodes.length; j++) {
                    zTree.expandNode(nodes[j], true, false, false);
                }
            }

        });


    });

    function zOnClick(event, treeId, treeNode) {
        treeId = treeNode.id;
        let treeName = treeNode.name;
        $("#treeId").val(treeId);
        $("#treeName").val(treeName);
    }


    //展开
    function expand() {
        zTree.expandAll(true);
    }

    //折叠
    function collapse() {
        zTree.expandAll(false);
    }

    // 隐藏/显示搜索栏
    function toggleSearch() {
        $('#search').slideToggle(200);
        $('#btnShow').toggle();
        $('#btnHide').toggle();
        $('#keyword').focus();
    }

    let lastValue;

    // 搜索节点
    function searchNode() {
        // 取得输入的关键字的值
        let value = trim($("#keyword").val());
        if (lastValue === value) {
            return;
        }
        // 保存最后一次搜索名称
        lastValue = value;
        let nodes = zTree.getNodes();
        // 如果要查空字串，就退出不查了。
        if (value === "") {
            showAllNode(nodes);
            return;
        }
        hideAllNode(nodes);
        // 根据搜索值模糊匹配
        updateNodes(zTree.getNodesByParamFuzzy("name", value));
    }

    // 显示所有节点
    function showAllNode(nodes) {
        nodes = zTree.transformToArray(nodes);
        for (let i = nodes.length - 1; i >= 0; i--) {
            if (nodes[i].getParentNode() != null) {
                zTree.expandNode(nodes[i], true, false, false, false);
            } else {
                zTree.expandNode(nodes[i], true, true, false, false);
            }
            zTree.showNode(nodes[i]);
            showAllNode(nodes[i].children);
        }
    }

    // 隐藏所有节点
    function hideAllNode(nodes) {
        nodes = zTree.transformToArray(nodes);
        for (let i = nodes.length - 1; i >= 0; i--) {
            zTree.hideNode(nodes[i]);
        }
    }

    // 更新节点状态
    function updateNodes(nodeList) {
        zTree.showNodes(nodeList);
        for (let i = 0, l = nodeList.length; i < l; i++) {
            let treeNode = nodeList[i];
            showChildren(treeNode);
            showParent(treeNode)
        }
    }

    // 显示所有孩子节点
    function showChildren(treeNode) {
        if (treeNode.isParent) {
            for (let idx in treeNode.children) {
                if (treeNode.children.hasOwnProperty(idx)) {
                    let node = treeNode.children[idx];
                    zTree.showNode(node);
                    showChildren(node);
                }
            }
        }
    }

    // 显示所有父节点
    function showParent(treeNode) {
        let parentNode;
        while ((parentNode = treeNode.getParentNode()) != null) {
            zTree.showNode(parentNode);
            zTree.expandNode(parentNode, true, false, false);
            treeNode = parentNode;
        }
    }


</script>
</body>
</html>
